<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>ECharts</title>
    <!-- 引入刚刚下载的 ECharts 文件 -->
    <script src="static/echarts.js"></script>
    <script src="static/jquery-3.4.1.min.js"></script>
    <link rel="stylesheet" href="static/layui/css/layui.css">
    <script src="static/layui/layui.js"></script>
    <link rel="shortcut icon" href="static/picture/swpu02.ico" />
    <link rel="stylesheet" href="css/index.css" />
</head>
<body>
<!-- 头部 -->
<header>
    <h1 align="center">IP数据流向监测</h1>
    <div class="show-time" align="right"></div>
    <script>
        var t = null;
        t = setTimeout(time, 1000); //开始运行
        function time() {
            clearTimeout(t); //清除定时器
            dt = new Date();
            var y = dt.getFullYear();
            var mt = dt.getMonth() + 1;
            var day = dt.getDate();
            var h = dt.getHours(); //获取时
            var m = dt.getMinutes(); //获取分
            var s = dt.getSeconds(); //获取秒
            document.querySelector(".show-time").innerHTML =
                "当前时间：" +
                y +
                "年" +
                mt +
                "月" +
                day +
                "日-" +
                h +
                "时" +
                m +
                "分" +
                s +
                "秒";
            t = setTimeout(time, 1000); //设定定时器，循环运行
        }
    </script>
</header>

<!-- 页面主体 -->
<section class="mainbox">

    <!-- 左侧盒子 -->
    <div class="column" >
        <div class="panel pie">
            <div class="chart" id="flowCount"></div>
<!--            <div class="panel-footer"></div>-->
        </div>

        <div class="panel pie2">
            <div class="chart" id="destinationIp"></div>
            <!--            <div class="panel-footer"></div>-->
        </div>
    </div>


    <!-- 右侧盒子 -->
    <div class="column" id="right">
        <div class="panel pie3">
            <div class="chart" id="destinationPort"></div>
            <!--            <div class="panel-footer"></div>-->
        </div>

        <div class="panel pie">
            <div class="chart" id="fromIP"></div>
            <!--            <div class="panel-footer"></div>-->
        </div>
    </div>

</section>

<!-- 为 ECharts 准备一个定义了宽高的 DOM -->
<!-- 第一个div容器 -->
<!--<div id="fromIP" style="width: 600px;height:400px; float: left">-->
<script type="text/javascript">
    var chartDom1 = document.getElementById('fromIP');
    var myChart1 = echarts.init(chartDom1);
    var option1;

    option1 = {
        title: {
            text: '访问源IP Top7',
            left: 150,
            top: 30
        },
        tooltip: {
            trigger: 'item'
        },
        legend: {
            orient: 'vertical',
            right: 'right'
        },
        series: [
            {
                name: '源IP',
                type: 'pie',
                center:['40%', '50%'],
                radius: '50%',
                data: [],
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0,0,0,0.5)'
                    }
                }
            }
        ]
    };
    //使用刚指定的配置项和数据显示图标
    option1 && myChart1.setOption(option1, true);
    $.ajax({
        url: '/ip/getFromIp',
        type: 'get',
        dataType: "json",
        success: function(res) {
            console.log(res);
            var data = res.data;
            //console.log()
            if (res) {
                myChart1.setOption({
                   series: {
                       data: [
                           data[0],
                           data[1],
                           data[2],
                           data[3],
                           data[4],
                           data[5],
                           data[6]
                       ]
                   }
                })
            }
        }
    })
</script>

<script type="text/javascript">
    var chartDom2 = document.getElementById('destinationIp');
    var myChart2 = echarts.init(chartDom2);
    var option2;

    option2 = {
        title: {
            text: '目的IP Top7',
            left: 250,
            top: 30
        },
        tooltip: {
            trigger: 'item'
        },
        legend: {
            orient: 'vertical',
            left: 'left'
        },
        series: [
            {
                name: '目的IP',
                type: 'pie',
                center:['60%', '50%'],
                radius: '50%',
                data: [],
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0,0,0,0.5)'
                    }
                }
            }
        ]
    };
    //使用刚指定的配置项和数据显示图标
    option2 && myChart2.setOption(option2, true);
    $.ajax({
        url: '/ip/getDestinationIp',
        type: 'get',
        dataType: "json",
        success: function(res) {
            console.log(res);
            var data2 = res.data;
            //console.log()
            if (res) {
                myChart2.setOption({
                    series: {
                        data: [
                            data2[0],
                            data2[1],
                            data2[2],
                            data2[3],
                            data2[4],
                            data2[5],
                            data2[6]
                        ]
                    }
                })
            }
        }
    })
</script>

<script type="text/javascript">
    var chartDom3 = document.getElementById('destinationPort');
    var myChart3 = echarts.init(chartDom3);
    var option3;

    option3 = {
        title: {
            text: '目的Port Top7',
            left: 150,
            top: 30
        },
        tooltip: {
            trigger: 'item'
        },
        legend: {
            orient: 'vertical',
            right: 'right'
        },
        series: [
            {
                name: '目的Port',
                type: 'pie',
                center:['40%', '50%'],
                radius: '50%',
                data: [],
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0,0,0,0.5)'
                    }
                }
            }
        ]
    };
    //使用刚指定的配置项和数据显示图标
    option3 && myChart3.setOption(option3, true);
    $.ajax({
        url: '/ip/getDestinationPort',
        type: 'get',
        dataType: "json",
        success: function(res) {
            console.log(res);
            var data3 = res.data;
            //console.log()
            if (res) {
                myChart3.setOption({
                    series: {
                        data: [
                            data3[0],
                            data3[1],
                            data3[2],
                            data3[3],
                            data3[4],
                            data3[5],
                            data3[6]
                        ]
                    }
                })
            }
        }
    })
</script>

<script type="text/javascript">
    var chartDom4 = document.getElementById('flowCount');
    var myChart4 = echarts.init(chartDom4);
    var option4;

    option4 = {
        title: {
            text: '流量统计 Top7(单位MB)',
            left: 250,
            top: 30
        },
        tooltip: {
            trigger: 'item'
        },
        legend: {
            orient: 'vertical',
            left: 'left'
        },
        series: [
            {
                name: '流量统计',
                type: 'pie',
                center:['60%', '50%'],
                radius: '50%',
                data: [],
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0,0,0,0.5)'
                    }
                }
            }
        ]
    };
    //使用刚指定的配置项和数据显示图标
    option4 && myChart4.setOption(option4, true);
    $.ajax({
        url: '/ip/getFlowCount',
        type: 'get',
        dataType: "json",
        success: function(res) {
            console.log(res);
            var data = res.data;
            console.log(data)
            if (res) {
                myChart4.setOption({
                    series: {
                        data: [
                            data[0],
                            data[1],
                            data[2],
                            data[3],
                            data[4],
                            data[5],
                            data[6]
                        ]
                    }
                })
            }
        }
    })
</script>

</body>
</html>